<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            font-family: "微软雅黑";
        }
        .tou{
            width: 100%;
            height: 177px;
            
        }
        /* 头1*/
        .tou1{
            margin-top: 10px;
            width: 35.5%;
            margin: auto;
            color: gray;
            font-size: 18px;
        }
        .tou1 div{
            display: inline;
        }
        .tou1 div:nth-child(1){
            color: #6ed13c;
        }
        .tou1 div:nth-child(2){
            font-size: 12px;
            padding: 1px;
            padding-left: 5px;
            padding-right: 5px;
            border: 1px solid;
            border-radius: 4px;
            margin-left: 10px;
        }
       /* 搜索区域*/
       .tou2{
        width: 73%;
        height: 45px;
        margin: auto;
        margin-top: 20px;
        position: relative;
       }
       .tou2 div{
        display: inline-block;
        height: 100%;
       }
      .img{
        width: 16.5%;
        background-image: url(https://st.douding.cn/images_cn/logo/logo_195_58.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
       }
       .tou2 div:nth-child(2){
        width: 53%;
        margin-left: 5%;
        background-color: #e9e8e8cf;
        border-radius: 7px;
        height: 84%;
        position: relative;
       }
       .img1{
        width: 4%;
        height: 5%;
        margin: 0 auto;
        background-image: url(https://st.douding.cn/images_cn/nav/ico_input_search.svg);
        background-repeat: no-repeat;
       position: absolute;
       top: 25%;
       right: 2%;
       }
       .tou2 div:nth-child(3){
        width: 10%;
        position: absolute;
        top: 34%;
        margin-left: 15px;
        font-size: 13px;
        color: #5f5c5ccf;
       }
       .tou2 div:nth-child(4){
        position: absolute;
        right: 0%;
        width: 12%;
       }
       .tou2 div:nth-child(4) ul{
        margin-left: 25px;
        list-style: none;
        margin-top: 10%;
       }
       .tou2 div:nth-child(4) ul li{
        display: inline-block;
        text-align: center;
        width: 45px;
       }
       /*导航*/
       .tou3{
        width: 100%;
        height: 88.5px;
        margin-top: 10px;
        background-color: rgba(6, 83, 171, 0.914);
       }
       /*外边框*/
       .tou3_q{
        width: 75%;
        height: 75%;
        
       
        margin: auto;
        margin-top: 12px;
        margin-left: 12.5%;
        display: inline-block;
        color: #f3f0f0;
       }
       .tou3_q div{
        display: inline-block;
        margin-top: 6px;
       }
       .tou3_q1{
        width: 23%;
        border-right: 1px solid #f3f0f0;
       }
       .tou3_q1 ul{
        margin-top: 5px;
       }
       .tou3_q1 ul li{
        display: inline-block;
        padding-left: 15px;
       }
       .qw{
        width: 38%;
       }
       .tou3_q2{
        width: 13%;
       }
       .tou3_q2 ul li{
        display: inline-block;
       }
       .img2,.img3{
        width: 40%;
        text-align: center;
       }
       .img4{
        font-size: 13px;
        color: #e8f838;
       }
       .img4 li:nth-child(2){
        padding-left: 18px;
       }
       .img4 li:nth-child(1){
        padding-left: 6px;
       }
       /*内容*/
       .ner{
        width: 100%; 
        height: 550px;
       }
       .ner1{
        width: 100%;
        height: 180px;
        background-color: #0e7bd5;
        position: relative;
        color: #f3f0f0;
       }
       .ner1 div p{
        display: inline-block;
        color: #e8f838;
       }
       .ner1 div h2{
        display: inline-block;
        font-size: 35px;
        letter-spacing:5px;
       }
       .ner1 div .sc{
        color: #f3f0f0;
        font-size: 18px;
        letter-spacing:4px;
       }
       .ner1 div:nth-child(2){
        width: 47%;
        margin: auto;
        margin-top: 20px;
       }
       .ner1 div:nth-child(3){
        width: 27%;
        margin: auto;
        font-size: 15px;
        margin-top: 10px;
       }
       .ner1 div:nth-child(4){
        width: 43%;
        margin: auto;
        font-size: 15px;
        margin-top: 10px;
       }
       .ner1 div:nth-child(1){
        width: 3.4%;
        margin-left: 80%;
        font-size: 10px;
        padding: 2px;
        border: 1px solid #f3f0f0;
       }
       /*内容2*/
       .ner2{
        width: 75%;
        height: 250px;
        margin: auto;
        margin-top: 15px;
        position: relative;
       }
       /*左*/
       .ner2_p{
        width: 70%;
        height: 100%;
        display: inline-block;
        position: absolute;
        left: 0;
        border-radius: 5px;
        border: 1px solid #afb0aebe;
        border-radius: 5px;
       }
       /*右*/
       .ner2_p1{
        width: 28.6%;
        height: 100%;
        margin-left: 10px;
        display: inline-block;
        position: absolute;
        right: 0;
        border: 1px solid #afb0aebe;
        border-radius: 5px;
       }
       .ner2_p-q{
        width: 100%;
        height: 18%;
        background-color: #d4d6d3f6;
       }
       .ner2_p p{
        display: inline-block;
       }
       .ner2_p p:nth-child(1){
        font-size: 18px;
        margin-left: 3px;
        margin-left: 2%;
        margin-top: 1%;
       }
       .ner2_p p:nth-child(2){
       margin-left: 80%;
       color: #1e76bf;
       font-size: 10px;
       }
       .ner2_p-q1{
        width: 100%;
        height: 82%;
       }
       .ner2_p-q1 ul{
        display: inline-block;
         width: 23.5%;
          margin-left: 1%;
           list-style: none;
       }
       .ner2_p-q1 ul li{
        font-size: 16px;
        line-height: 205%;
        color: #323235;
       }
       .ner2_p1-p{
        width: 100%;
        height: 18%;
       }
       .ner2_p1-p div{
        width: 49.1%;
        height: 100%;
        display: inline-block;
        text-align: center;
        line-height: 260%;
       }
       .ner2_p1-p div:nth-child(2){
        background-color: rgb(188, 205, 220);
       }
       .ner2_p1-p1{
        width: 100%;
        height: 82%;
       }
       .ner2_p1-p1 input{
        display: inline-block;
        margin-top: 17px;
        width: 82%;
        height: 15%;
        margin-left: 9%;
        border-radius: 5px;
        border: 1px solid rgb(100, 99, 99);
       }
       .ner2_p1-p1 button{
        width: 35%;
        height: 15%;
        font-size: 16px;
        font-weight: 900;
        color: #f3f0f0;
        margin-top: 2%;
       }
       .but{
        background-color: #0e7bd5;
        margin-left: 10%;
       }
       .but1{
        background-color: #1ded4e;
        margin-left: 2%;
       }
       .ttt{
        width: 100%;
        height: 15%;
        margin-top: 3%;
       }
       .ttt ul li{
        display: inline-block;
        width: 22%;
        text-align: center;
        font-size: 15px;
       }
    </style>
</head>
<body>
    <header class="tou">
        <div class="tou1">常来豆丁浏览或分享文档吗？把豆丁<div>加入收藏夹</div>呗！<div>不在提示</div></div>
        <div class="tou2">
            <div class="img"></div>
            <div><div class="img1"></div> </div>
            <div>帮助</div>
            <div>
                <ul>
                    <li>登录</li>
                    <li>注册</li>
                </ul>
            </div>
        </div>
        <!-- 导航-->
        <div class="tou3">
            <div class="tou3_q">
                <div class="tou3_q1">
                    <ul>
                        <li>创业</li>
                        <li>案例</li>
                        <li>会议</li>
                        <li>企业工具</li>
                    </ul>
                    <ul>
                        <li>创业</li>
                        <li>案例</li>
                        <li>会议</li>
                        <li>企业工具</li>
                    </ul>
                </div>
                <div class="tou3_q1">
                    <ul>
                        <li>建筑</li>
                        <li>资讯</li>
                        <li>资料</li>
                        <li>视频课堂</li>
                    </ul>
                    <ul>
                        <li>施组</li>
                        <li>方案</li>
                        <li>图纸</li>
                        <li>施工交底</li>
                    </ul>
                </div>
                <div class="tou3_q1 qw">
                    <ul>
                        <li>考研</li>
                        <li>合同</li>
                        <li>报告</li>
                        <li>薪酬</li>
                        <li>素材</li>
                        <li>在家学习</li>
                        <li>vip会员</li>
                    </ul>
                    <ul>
                        <li>漫画</li>
                        <li>作文</li>
                        <li>总结</li>
                        <li>医疗</li>
                        <li>文档合伙人</li>
                    </ul>
                </div>
                <div class="tou3_q2">
                    <ul>
                        <li class="img2">
                            <img src="https://st.douding.cn/images_cn/nav/ico_banner_upload.svg"> 
                        </li>
                        <span>|</span>
                        <li class="img3">
                            <img src="https://st.douding.cn/images_cn/nav/ico_banner_cloud.svg">
                        </li>
                    </ul>
                    <ul class="img4">
                        <li>我要上传</li>
                        <li>丁豆书房</li>
                    </ul>
                </div>
            </div>
        </div>
        </div>
    </header>
    <div class="ner">
        <div class="ner1">
            <div>不在展示</div>
            <div><h2>欢迎来到豆丁网</h2><p class="sc">-----面向全球的C2C中文文档分享平台。</p></div>
            <div>这里有超过八亿的<p>应用文档</p>和<p>书刊</p>，帮助你进行学习和实践；</div>
            <div>快来体验”<p>豆丁书房</p>“，把你想的东西<p>同步到手机、ipad</p>上，随时随地，专注于你的个人成长！</div>
        </div>
        <div>
            <div class="ner2">
                <div class="ner2_p">
                    <div class="ner2_p-q">
                        <p>文档分类</p>
                        <p>更多></p>
                    </div>
                    <div class="ner2_p-q1">
                        <ul >
                            <li>+幼儿/小学教育</li>
                            <li>+外语学习</li>
                            <li>+经济/贸易/财会</li>
                            <li>+建筑/环境</li>
                            <li>+研究报告</li>
                            <li>+图书</li>
                        </ul>
                        <ul>
                            <li>+幼儿/小学教育</li>
                            <li>+外语学习</li>
                            <li>+经济/贸易/财会</li>
                            <li>+建筑/环境</li>
                            <li>+研究报告</li>
                            <li>+图书</li>
                        </ul>
                        <ul>
                            <li>+幼儿/小学教育</li>
                            <li>+外语学习</li>
                            <li>+经济/贸易/财会</li>
                            <li>+建筑/环境</li>
                            <li>+研究报告</li>
                            <li>+图书</li>
                        </ul>
                        <ul>
                            <li>+幼儿/小学教育</li>
                            <li>+外语学习</li>
                            <li>+经济/贸易/财会</li>
                            <li>+建筑/环境</li>
                            <li>+研究报告</li>
                            <li>+图书</li>
                        </ul>
                    </div>
                </div>
                <div class="ner2_p1">
                    <div class="ner2_p1-p">
                        <div>登录</div>
                        <div>注册</div>
                    </div>
                    <div class="ner2_p1-p1">
                        <input type="text" placeholder="用户名/邮箱/手机号" class="shur"><br>

                        <input type="password" placeholder="登录账号" class="shur1"><br>
                        <div style="width: 57%;display: inline-block;"></div>
                         <div style="display: inline-block">
                            <ul><li style="display: inline;">忘记密码</li>|<li style="display: inline;">注册</li></ul></div><br>
                            <button class="but">登录</button> <button class="but1"2>微信登录</button>
                            <div class="ttt">
                                <ul>
                                    <li>qq</li>|
                                    <li>微博</li>|
                                    <li>支付宝</li>|
                                    <li>更多>></li>
                                </ul>
                            </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>